Animation - grid

Revision:

12 column grid - less CSS, lighter code, resize it!!

1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
1
2
3
4
5
6
1
2
3
4
5
1
2
3
4
1
2
3
1
2
1
code: 
            <div id="grid-epsilon">
                <section id="row-one2"><div class="c-1">1</div></section> 
                <section id="row-two2"><div class="c-1">1</div><div class="c-2">2</div></section> 
                <section id="row-three2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div></section> 
                <section id="row-four2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div></section> 
                <section id="row-five2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div></section> 
                <section id="row-six2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div></section> 
                <section id="row-seven2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div></section> 
                <section id="row-eight2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div></section> 
                <section id="row-nine2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div></section> 
                <section id="row-ten2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div></section> 
                <section id="row-eleven2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div></section> 
                <section id="row-twelve2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div><div class="c-12">12</div></section> 
                <section id="row-thirteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div><div class="c-12">12</div></section> 
                <section id="row-fourteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-10">10</div><div class="c-11">11</div></section> 
                <section id="row-fifteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div><div class="c-11">10</div></section> 
                <section id="row-sixteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div><div class="c-9">9</div></section> 
                <section id="row-seventeen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div><div class="c-8">8</div></section> 
                <section id="row-eighteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div>
                <div class="c-7">7</div></section> 
                <section id="row-nineteen2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div><div class="c-6">6</div></section> 
                <section id="row-twenty2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div><div class="c-5">5</div></section> 
                <section id="row-twentyone2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div><div class="c-4">4</div></section>  
                <section id="row-twentytwo2"><div class="c-1">1</div><div class="c-2">2</div><div class="c-3">3</div></section> 
                <section id="row-twentythree2"><div class="c-1">1</div><div class="c-2">2</div></section> 
                <section id="row-twentyfour2"><div class="c-1">1</div></section> 
            </div>
            <style>
                html {box-sizing: border-box; font-size: 100%; background-image: linear-gradient(35deg, lightgrey, orange, darkgray);}
                *, *:before, *:after {box-sizing: inherit;}
                body {background: transparent; font-family: 'Open Sans', sans-serif; font-size: 1.2vw; padding: 0; margin: 0;}
                h2{font-size: 2vw; color: darkgreen; display: flex; justify-content: start; text-decoration-line:overline underline;}
                #grid-epsilon{grid-template-columns: repeat(12, 1fr); grid-template-rows: minmax(2vh, auto); gap: 0vw; width: 96vw; height: auto; font-size: 2vw;}
                #grid-epsilon section{margin-left: 1vw; text-align: center;margin-bottom: 0vw; font-weight: bold; }
                #grid-epsilon section{display: grid; grid-auto-flow: column dense;}
                div:not(#grid){border: 0.2vw solid darkgreen; border-collapse: collapse;}
            
                #row-one2{grid-column:1/13; grid-row:1/2;}
                #row-three2{grid-column:1/13; grid-row:3/4;}
                #row-four2{grid-column:1/13; grid-row:4/5;}
                #row-five2{grid-column:1/13; grid-row:5/6;}
                #row-six2{grid-column:1/13; grid-row:6/7;}
                #row-seven2{grid-column:1/13; grid-row:7/8;}
                #row-eight2{grid-column:1/13; grid-row:8/9;}
                #row-nine2{grid-column:1/13; grid-row:9/10;}
                #row-ten2{grid-column:1/13; grid-row:10/11;}
                #row-eleven2{grid-column:1/13; grid-row:11/12;}
                #row-twelve2{grid-column:1/13; grid-row:12/13}
                #row-thirteen2{grid-column:1/13; grid-row:13/14;}
                #row-fourteen2{grid-column:1/13; grid-row:14/15;}
                #row-fifteen2{grid-column:1/13; grid-row:15/16;}
                #row-sixteen2{grid-column:1/13; grid-row:16/17;}
                #row-seventeen2{grid-column:1/13; grid-row:17/18;}
                #row-eighteen2{grid-column:1/13; grid-row:18/19;}
                #row-nineteen2{grid-column:1/13; grid-row:19/20;}
                #row-twenty2{grid-column:1/13; grid-row:20/21;}
                #row-twentyone2{grid-column:1/13; grid-row:21/22;}
                #row-twentytwo2{grid-column:1/13; grid-row:22/23;}
                #row-twentythree2{grid-column:1/13; grid-row:23/24;}
                #row-twentyfour2{grid-column:1/13; grid-row:24/25;}
            
                .c-1{animation: coloring 5s linear alternate infinite;}
                .c-2{animation: coloring 6s linear alternate infinite;}
                .c-3{animation: coloring 7s linear alternate infinite;}
                .c-4{animation: coloring 6s linear alternate infinite;}
                .c-5{animation: coloring 5s linear alternate infinite;}
                .c-6{animation: coloring 6s linear alternate infinite;}
                .c-7{animation: coloring 7s linear alternate infinite;}
                .c-8{animation: coloring 6s linear alternate infinite;}
                .c-9{animation: coloring 5s linear alternate infinite;}
                .c-10{animation: coloring 6s linear alternate infinite;}
                .c-11{animation: coloring 7s linear alternate infinite;}
                .c-12{animation: coloring 6s linear alternate infinite;}
                
                @keyframes coloring{
                    0%{background-color: black; color:yellow;}
                    50%{background-color:yellow; color:red;}
                    to{background-color: red; color: black;}
                }
               
            </style>